<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="moment/js/moment.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>计算属性显示时间</h2>
			<div>{{formatTime}}</div>
			<h2>方法显示时间</h2>
			<div>{{getFormatTime()}}</div>
			<h2>过滤器显示时间</h2>
			<div>{{time | formatTimeFilter}}</div>
			<div>{{time | formatTimeFilter('YYYY/MM/DD')}}</div>
			<div>{{time | formatTimeFilter('YYYY/MM/DD') | sliceTime}}</div>
			<div>{{time | formatTimeFilter('YYYY/MM/DD') | mySlice}}</div>
		</div>
	</body>
	<script>
		//html中为局部过滤器的设置
		// 全局过滤器设置
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		// 除了插值语法，v-bind处理

		new Vue({
			el:'#root',
			data(){
				return {
					time:moment()
				}
			},
			methods:{
				getFormatTime(){
					return this.time.format('YYYY-MM-DD HH:mm:ss')
				}
			},
			computed:{
				formatTime(){
					return this.time.format('YYYY-MM-DD HH:mm:ss')
				}
			},
			filters:{
				formatTimeFilter(value,str = 'YYYY-MM-DD HH:mm:ss'){
					return value.format(str)
				},
				sliceTime(value){
					return value.slice(0,4)
				}
			}
		})
	</script>
</html>